<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../js/vue.js"></script>
    <style>
        .img{
            width:300px;
            height:300px;
        }
        .static{
            width:200px;
            height:200px;
            text-align: center;
            line-height: 200px;
            font-size: 100px;
            color:blue;
        }
        .a{
            background: fuchsia;
        }
        .b{
            border-radius: 50%;
        }
        .c{
            border:5px solid yellowgreen;
        }
        .img{
            width:110px;
            height:60px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 :data-title="title" >{{ title }}</h2>
        <div>
            <table>
                <thead>
                    <tr>
                        <td>序号</td>
                        <td>选中</td>
                        <td>名称</td>
                        <td>描述</td>
                        <td>单价</td>
                        <td>数量</td>
                        <td>小计</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in goods " :key="index">
                        <td>
                            {{ index + 1}}
                        </td>
                        <td>
                            <input type="checkbox" v-model="item.check">
                        </td>
                        <td>
                            {{item.title }}
                        </td>
                        <td>
                            <img :src="src" class="img" alt="">
                        </td>
                        <td>
                            {{item.price}}
                        </td>
                        <td>
                            <input type="number" v-model="item.count">
                        </td>
                        <td>
                            <b> {{item.price * item.count }}</b>
                        </td>
                        <td>
                            <button @click="goods.splice(index,1)" >删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div>
                <p>
                    <input type="checkbox" id="quan" v-model="quan">
                    <label for="quan">全选反选</label>
                    <button @click="deleteCheck">删除选中</button>
                </p>
                <p>
                    总数量:{{total}} / {{itotal}}  选中总数量: {{checktotal}} / {{ ichecktotal }}
                </p>
                <p>
                    总价值:{{amount}} /  {{iamount}} 选中总价值: {{checkamount}} / {{icheckamount}}
                </p>
            </div>
        </div>
    </div>
    <script>
        const vm = new Vue({
            // el:"#app"
            data:{  // 简单数据
                title:'Vue 实现简单的购物车 ',
                goods:[  // 商品数据 
                    {check:false,title:"上衣",price:200,count:10},
                    {check:true,title:"裤子",price:100,count:10},
                    {check:false,title:"鞋子",price:500,count:10},
                    {check:false,title:"风衣",price:1000,count:10},
                    {check:true,title:"帽子",price:300,count:10},
                    {check:true,title:"西服",price:2000,count:10},
                ],
                src:"https://dss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/res/r/image/2022-10-7/banner.png",
                total:0,
                checktotal:0,
                amount:0,
                checkamount:0, 
            },
            computed:{
                quan:{
                    get(){
                        return this.goods.length > 0 && this.goods.every(item=>item.check);
                    },
                    set(v){
                        console.log(v)
                        this.goods = this.goods.map((item)=>{
                            item.check = v;
                            return {...item}
                        })
                    }
                },
                itotal(){
                    return this.goods.reduce((prev,item,index)=>prev + item.count,0)
                },
                ichecktotal(){
                    return this.goods.reduce((prev,item,index)=> prev + (item.check?item.count:0 ) ,0)
                },
                iamount(){
                    return this.goods.reduce((prev,item,index)=>prev+(item.count * item.price),0)
                },
                icheckamount(){
                    return this.goods.reduce((prev,item,index)=> prev + (item.check ? item.count * item.price : 0   ) , 0)
                }
            },
            methods:{
                deleteCheck(){
                    this.goods = this.goods.filter(item=>!item.check);
                }
            },
            mounted(){
                // 真实DOM
                document.getElementsByTagName('title')[0].innerHTML = this.title;
            },
        }).$mount("#app")    
    </script>
</body>
</html>